<script setup>
  import { ref } from "vue"
  // 1 创建响应式数据
  const red = ref(true)
  const green = ref(true)

  const isLogin = ref(true)

  const marke = ref(0)
</script>

<template>
<div>
  <!-- v-if -->
  <div class="red" v-if="red">
  </div>
  <!-- v-show -->
  <div class="green" v-show="green">
  </div>
  <button @click="red=!red">控制红色色块</button>
  <button @click="green=!green">控制绿色色块</button>
  <hr>
  
  <!-- 双分支渲染 -->
  <p v-if="isLogin">您好！欢迎回来</p>
  <p v-else>请先进行登录</p>
  <hr>

  <!-- 多分支渲染 -->
  <p v-if="marke >= 90">优秀</p>
  <p v-else-if="marke >= 60">良好</p>
  <p v-else>未及格</p>
</div>
</template>

<style scoped>
  .red, .green {
    width: 250px;
    height: 250px;
  }

  .red {
    background-color: red;
  }

  .green {
    background-color: green;
  }
</style>